<template>
	<span
		:class="{
			'show-quesiton': !actualShowAnswer,
			'show-actual-answer': actualShowAnswer && !showAnswer,
		}"
		>{{ text }}</span
	>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
	showAnswer: {
		type: Boolean,
		default: false,
	},
	forceShowAnswer: {
		type: Boolean,
		default: false,
	},
	content: {
		type: String,
		default: "?",
	},
});

const actualShowAnswer = computed(
	() => props.forceShowAnswer || props.showAnswer
);

const text = computed(() =>
	props.forceShowAnswer ? props.content : props.showAnswer ? props.content : "?"
);
</script>

<style lang="less">
.show-quesiton {
	color: red;
}

.show-actual-answer {
	color: green;
}
</style>
